@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
@import "ozaria/site/styles/common/variables"
@import "app/styles/play/ace-editor"

@mixin editor-height($extraHeight)
  width: 98%
  height: 88%
  height: unquote("-webkit-calc(88% - 50px -")$extraHeight unquote(")")
  height: unquote("calc(88% - 50px -")$extraHeight unquote(")")

#spell-view
  height: 100%
  display: none
  position: relative
  z-index: 1
  overflow: hidden

  &.shown
    display: block

  .code-background
    position: absolute
    top: -68px
    left: 0px
    height: 100%
    right: -10px
    border: 1px solid transparent

  span.code-background
    background-color: #ffffff

  img.code-background
    display: none
    width: 100%

  .save-status
    display: none
    position: absolute
    top: 5px
    left: 20px
    z-index: 4

  .programming-language-container
    position: absolute
    top: 10px
    right: 26px
    z-index: 4
    font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif
    font-size: 14px
    padding: 0px 10px
    .programming-language-label
      color: #6E654B
      font-weight: bold
      text-transform: uppercase
    .programming-language
      color: darkred

  @include ace

.ace_autocomplete .ace_line:not(.ace_selected) .ace_completion-meta
  // Don't show "press enter" on lines that aren't currently selected
  display: none

